<!-- <template lang="">
  <div class="content">
    <div class="main">
    <el-tabs v-model="activeName">
      
      <el-tab-pane label="销售列表" name="first">
        <common-table></common-table>
      </el-tab-pane>
      <el-tab-pane label="销售面板" name="second" >
        <common-change></common-change>
      </el-tab-pane>
      <el-tab-pane label="底层数据" name="third">
        <common-table1></common-table1>
      </el-tab-pane>
    </el-tabs>
  </div>
  </div>
</template>

<script>
  //导入draggable组件
  import draggable from 'vuedraggable'
  import CommonChange from '@/components/CommonChange.vue'
  import CommonTable from '@/components/CommonTable.vue'
  import CommonTable1 from '@/components/CommonTable1.vue'
  export default {
   
    //注册draggable组件

    name: 'change',
    components: {
      draggable,CommonChange,CommonTable,CommonTable1
    },
    inject: ['reload'],
    data() {
      return {
        activeName: 'first',
        
      };
    },
    // 组件挂在完毕发请求
    mounted() {
     
    },
    methods: {    
    }
  }

</script>
<style scoped>
  @import "../../../style/style.css";
  /* @import "../style/style.css"; */

  /*定义要拖拽元素的样式*/
 

  .chosenClass {
    /* background-color: #fff !important; */
    opacity: 1 !important;
  }

  .dragClass {
    background-color: #eee !important;
    opacity: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
  }

  .itxst {
    /* margin: 10px; */
    height: 700px;
    /* min-height: 100%; */
    /* display: flex;
    flex-direction: row;
    flex-wrap: nowrap; */

  }

  .title {
    font-size: 18px;
    padding: 30px 0 15px 0;

  }

  .el-button {
    background-image: linear-gradient(to right, #0060ff, #0005cf);
    color: #fff;
    font-size: 16px;
    width: 90px;
    height: 39px;
  }

  .col {
    width: 300px;
    /* flex: 1; */
    /* padding: 10px; */
    border: solid 0px #000;
    border-radius: 10px;
    float: left;
    /* background-color: #fff; */
    text-align: left;
    /* padding-left: 20px; */
    margin-left: 10px;

    /* flex: 0 0 auto; */
  }

  .col+.col {
    margin-left: 10px;
  }

  .item {
    padding: 15px 0px 15px 25px;
    margin: 0 10px;
    border: solid 1px #c9c6c6;
    background-color: #fff;
    height: auto;
    border-radius: 10px;
    /* overflow: hidden; */
    border: 1px solid #eee;
    /* margin-top: 70px; */

  }


  .item1 {
    /* padding: 6px 12px;
    margin: 0px 10px 0px 10px; */
    border: solid 1px #eee;
    background-color: #fff;
    width: 300px;

  }

  .item:hover {
    background-color: #c4daff1b;
    cursor: move;
    border: 1px solid #c4daff;
    cursor: pointer;
    box-shadow: 1px 1px 6px 3px #c4daff;

  }

  .item+.item {
    /* border-top: none; */
    margin-top: 16px;
  }

  .more>>>.el-form-item__label {
    font-size: 16px;
  }

  .more>>>.el-select .el-input {
    width: auto;
  }

  /* .pro>>>.el-progress-bar {
    width: 117%;
  } */

  .el-popover {
    min-width: 0 !important;
    font-size: 16px;
  }

  .bj .cz {
    opacity: 0;
    cursor: pointer;
    color: #0060ff;
    font-weight: 3000;
    border: 0px solid #000;
    writing-mode: tb-rl;
    font-size: 30px;
  }

  .item:hover .cz {
    opacity: 1;
    cursor: pointer;
    color: #0060ff;
    font-weight: 3000;
    border: 0px solid #000;
    writing-mode: tb-rl;
    font-size: 30px;
  }

  .more>>>.el-dialog {
    width: 400px;
    text-align: left;
  }
  .main>>>.el-tabs__content{
    overflow: visible !important;
    position: relative !important;
  }
</style> -->